<template>
  <view class="item-row flex justify-start">
    <view class="item-img">
      <view class="image">
        <fu-image :src="item.thumb" mode="aspectFill"></fu-image>
      </view>
    </view>
    <view class="item-info">
      <view class="item-title text-333 text-df text-cut">
        <block v-if="item.goods_label">
          <text class="item-tips text-xs" v-for='(item,index) in item.goods_label' :key="index">
            {{item}}
          </text>
        </block>
        <text style="vertical-align: middle;">{{item.name}}</text>
        
      </view>
      <view class="item-num text-999 text-sm">
        {{i18n['销量']}} {{item.sales_sum}}
      </view>
      <view class="item-price">
        <text class="text-price text-lg">{{item.shop_price}}</text><text class="text-through text-price text-sm">{{item.market_price}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    props:{
      item:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data(){
      return{

      }
    },
    mounted() {

    },
    methods:{

    }
  }
</script>

<style scoped lang="scss">
  .item-row{
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 24rpx;
    box-sizing: border-box;
    .item-img{
      width: 172rpx;
      height: 172rpx;
      position: relative;
      padding-bottom: 172rpx;
      margin-right: 48rpx;
      border-radius: 8rpx;
      overflow: hidden;
      background:#f8f8f8;
      .image{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .item-info{
      width: calc(100% - 220rpx);
      .item-title{
        .item-tips{
          // flex: 1 0 auto;
          padding: 4rpx 6rpx;
          text-align: center;
          background: rgba(255,100,100,0.1);
          border-radius: 4rpx;
          color: #FF6464;
          margin-right: 8rpx;
          display:inline-block;
          vertical-align: middle;
        }
      }
      .item-num{
        padding:16rpx 0 36rpx;
      }
      .item-price{
        text{
          &:nth-child(1){
            color: #FA2033;
          }
          &:nth-child(2){
            color: #BFBFBF;
            margin-left: 16rpx;
          }
        }
      }
    }
  }
</style>
